<template>
	<view :style="'-webkit-line-clamp:'+lineCount" class="TEXT"
		:class="showExpand ? (isExpand ?'' : 'max-line-' + lineCount) : ''">
		<u-parse :content="text"></u-parse>
		<view v-if="showExpand" class="BTN" :class="isExpand ? 'expand-btn' : ''" @click="expandOrShrink">
			<view class="btn-wrap clearfix" :style="{float:direction}">
				<view class="btn-text" :style="{ color: color }">
					{{ isExpand ? "收起" : "展开" }}
				</view>
				<view class="expand-icon">
					<uni-icons :type="isExpand ? 'top' : 'bottom'" :color="color" :size="size"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			text: {
				//文字
				type: String,
				default: "",
			},
			lineCount: {
				//行数
				type: Number,
				default: 10,
			},
			fontSize: {
				//传入字体大小（rpx）
				type: Number,
				default: 28,
			},
			color: {
				//文字和图标颜色
				type: String,
				default: "#FF3331",
			},
			direction: {
				//收起按钮-浮动方向-默认右浮动
				type: String,
				default: "right",
			},
		},
		data() {
			return {
				isExpand: false, //是否展开
				showExpand: false, //是否显示展开收起按钮
				windowWidth: null, //屏幕宽度
				size: 12, //展开收起按钮大小-默认12
			};
		},
		watch: {
			text() {
				// 有数据且页面渲染完成
				this.$nextTick(async () => {
					const res = await uni.getSystemInfo();
					// console.log(res);
					// 获取屏幕宽度
					this.windowWidth = res.windowWidth;
					this.judgeExpand(this.lineCount, this.fontSize);
				});
			},
		},
		mounted() {
			// 若text数据一开始有值，则监听触发不了，所以在此进行处理
			if (this.text) {
				uni.getSystemInfo().then((res) => {
					console.log(res);
					// 获取屏幕宽度
					this.windowWidth = res.windowWidth;
					this.judgeExpand(this.lineCount, this.fontSize);
				});
			}
		},
		methods: {
			// 点击展开/收起按钮
			expandOrShrink() {
				this.isExpand = !this.isExpand;
			},
			// 判断是否显示展开收起按钮
			judgeExpand(lineCount, fontSize) {
				// 行数 字体大小（rpx）
				let el = uni.createSelectorQuery().in(this).select('.TEXT');
				// 设置为0的定时器，解决小程序bug
				setTimeout(() => {
					el.boundingClientRect((res) => {
						const textHeight = res.height;
						const lineHeight = (fontSize * 1.5 * this.windowWidth) / 750;
						this.size = lineHeight > 42 ? 18 : 12;
						this.showExpand =
							textHeight > lineCount * lineHeight + lineCount / 2 + 1;
					}).exec();
				}, 0);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.max-line-3 {
		overflow: hidden !important;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		text-overflow: ellipsis;
	}

	.btn-wrap {
		background-color: #f2f3f5;
	}

	.TEXT {
		line-height: 1.5em;
		position: relative;
		word-break: break-all;
		max-height: 1000px;
		// transition: .3s max-height;
	}

	.BTN {
		position: absolute;
		right: 0;
		bottom: 0;
		height: 1.5em;
		line-height: 1.5em;
		// background: #f2f3f5;
	}

	.BTN .btn-text {
		float: left;
		margin-right: 8rpx;
		// padding-left: 10rpx;
		box-sizing: border-box;
	}

	.BTN .expand-icon {
		float: left;
		// padding-top: 8rpx;
	}

	.BTN::before {
		content: "";
		position: absolute;
		width: 1.5em;
		height: 1.5em;
		left: -1.5em;
		bottom: 0rpx;
		// background-image: linear-gradient(90deg,
		// 		rgba(255, 255, 255, 0) 0%,
		// 		rgb(242, 243, 245) 80%);
	}

	.expand-btn {
		position: static;
	}

	//   文字展开收起

	.max-line-1 {
		max-height: 1.5em;
		overflow: hidden;
	}

	.max-line-2 {
		max-height: 3em;
		overflow: hidden;
	}

	.max-line-3 {
		max-height: 4.5em;
		overflow: hidden;
	}

	.max-line-4 {
		overflow: hidden;
		max-height: 6em;
	}

	.max-line-5 {
		overflow: hidden;
		max-height: 7.5em;
	}

	.max-line-6 {
		overflow: hidden;
		max-height: 9em;
	}

	.max-line-7 {
		overflow: hidden;
		max-height: 10.5em;
	}

	.max-line-7 {
		overflow: hidden;
		max-height: 10.5em;
	}

	.max-line-8 {
		overflow: hidden;
		max-height: 12em;
	}

	.max-line-9 {
		overflow: hidden;
		max-height: 13.5em;
	}

	.max-line-10 {
		max-height: 15em;
		overflow: hidden;
	}
</style>